<template>
  <el-config-provider :locale="locale">
    <div class="common-layout">
      <el-container>
        <el-header>易易换电</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
                @open="handleOpen"
                @close="handleClose"
            >
              <RouterLink to="/autoChange">
                <el-menu-item index="1">
                  <el-icon>
                    <icon-menu/>
                  </el-icon>
                  <span>换电</span>
                </el-menu-item>
              </RouterLink>
              <RouterLink to="/autoChangeRecords">
                <el-menu-item index="2">
                  <el-icon>
                    <icon-menu/>
                  </el-icon>
                  <span>换电记录</span>
                </el-menu-item>
              </RouterLink>

            </el-menu>
          </el-aside>
          <el-main>
            <RouterView></RouterView>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import {ElConfigProvider} from 'element-plus'
import locale from 'element-plus/es/locale/lang/zh-cn'
import {Menu as IconMenu,} from '@element-plus/icons-vue'
import {RouterView} from 'vue-router'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style scoped>

</style>
